.design{
    .bg_white{
        padding:0px;
    }
    .container{
       .banner{ 
           margin-top:-20px;          
            li{
                width:1920px;
                height:500px;
                margin:0px;
                background: rgb(133, 133, 133);
            }
       }
       .class{
           ul{
               width:550px;
               margin:0px auto;
               padding:30px 0px;
               li{
                   float:left;
                   margin-right:60px;
                   padding:0px;
               }
           }
       }
    }
    .work{
       
        .work_list{
            width:224px;
            float:left;
            margin-top:20px;
            margin-right:20px;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            .cover{
                width:224px;
                height:140px;
                overflow: hidden;
                background: rgb(230, 230, 230);
                img{
                    max-width: 244px;
                    max-height:160px;
                    min-width:224px;
                    min-height:140px;
                }
            }
            .icon{
                font-size:13px;
                color:#adb0b3;
                margin-top:16px;
                margin-left:12px;
                padding-bottom:12px;
                span{
                    margin-right:18px;
                }
                i{
                    color:rgb(221, 221, 221);
                    margin-right:4px;
                    cursor: pointer;
                }
            }
            .user{
                border-top:1px solid rgb(241, 241, 241);
                margin-left:8px;
                padding-top:12px;
                padding-bottom:12px;
                .img_header{
                    width:24px;
                    height:24px;
                    text-align: center;
                    line-height: 24px;
                    border-radius: 50%;
                    overflow: hidden;
                    background: #d6d6d6;
                    i{
                        color:#fff;
                        font-size:12px;
                    }
                    img{
                        max-width:36px;
                        max-height:36px;
                        min-width:24px;
                        min-height:24px;
                    }
                }
                .fl{
                    line-height: 24px;
                    font-size:13px;
                    margin-left:6px;
                }
                .fr{
                    margin-right: 16px;
                    font-size:12px;
                    line-height: 24px;
                    color:#adb0b3;
                }
            }
        }
        .work_list:nth-child(5n){
            margin-right:0px;
        }
    }
}
.design_detail{
    position: absolute;
    padding-top:40px;
    top:0px;
    left:0px;
    width:100%;
    min-height:1080px;
    background: rgba(0,0,0,0.6);
    .arrow{
        div{
            width:36px;
            height:36px;
            text-align: center;
            border-radius: 50%;
            line-height: 36px;
            background: rgba(0,0,0,0.6);
            position: fixed;
            top:50%;
            i{
                color:#fff;
                font-size:12px;
            }
        }
        div:hover{
            background: #007fff;
        }
        .pre{
            left:30px;
        }
        .next{
            right:30px;
            transform: rotateY(180deg)
        }
    }   
    .task{
        width:90%;
        margin-top:130px;
        min-height:1080px;
        margin:0px auto;
        border-radius: 30px;
        background: #fff;
        position: relative;
        >.left{
            width:80%;
            min-height:1080px;
            box-sizing: border-box;
            padding:60px 0px 0px 60px;
            float:left;
            border-right:1px solid #e7e7e7;
            .class{
                padding:30px 16px;
                background: #007fff;
                position: absolute;
                color:#fff;
                border-radius: 0px 0px 3px 20px;
                top:0px;
                right:20%;
            }
            h2{
                span{
                    font-size:15px;
                    padding-right:20px;
                    font-weight: normal;
                    margin-left:60px;
                    color:#adb0b3;
                }
            }
            p{
                margin-top:30px;
                margin-left:10px;
                border-bottom:1px solid #e7e7e7;
                padding-bottom:40px;
                span{
                    margin-right:30px;
                    padding-right:30px;
                    border-right:1px solid #e7e7e7;
                    color:rgb(182, 182, 182);
                    i{
                        margin-right:6px;
                    }
                }
                span:nth-child(4),span:nth-child(5){
                    border-right:none;
                }
                span:nth-child(5){
                    margin-right:0px;
                    padding-right:20px;
                }
            }
            .content{
                margin-top:30px;
                margin-bottom:60px;
                font-size:13px;
                color:rgb(109, 109, 109);
            }
            .work{
                width:100%;
                text-align: center;
                img{
                    width:100%;
                }
            }
        }
        >.right{
            width:20%;
            float:left;
            height:300px;
            .user{
                position: fixed;
                width:18.1%;
                top:60px;
                right:5%;
                box-sizing: border-box;
                .header_img{
                    width:80px;
                    height:80px;
                    margin:0px auto;
                    line-height: 80px;
                    text-align: center;
                    border-radius: 50%;
                    overflow: hidden;
                    background: #e0e0e0;
                    i{
                        font-size:24px;
                        color:#fff;
                    }
                    img{
                        min-width:80px;
                        max-width:100px;
                        min-height:80px;
                        max-height:100px;
                    }
                }
            }
            .txt{
                h3{
                    font-weight: normal;
                    text-align: center;
                    margin-top:18px;
                }
                p{
                    font-size:14px;
                    color:#b1b1b1;
                    text-align: center;
                    margin-top:10px;
                }
                
        }
        ul{
            margin-top:30px;
            li{
                float:left;
                width:33.333%;
                text-align: center;
                box-sizing: border-box;
                border-right:1px solid #e7e7e7;
                p{
                    font-size:14px;
                    color:#b1b1b1;  
                }
                h3{
                    font-size:26px;
                    margin-top:10px;
                }
                h3:hover{
                    color:#007fff;
                }
            }
        }
        .but{
            margin-top:50px;
            text-align: center;
            .left{
                background: #007fff;
                color:#fff;
                margin-right:20px;
                border:0px;
            }
            button{
                padding:8px 28px;
                border-radius: 4px;
                border:1px solid #e0e0e0;
                background: none;
            }
        }
    }
    }
}
.work_comment{
    .discuss{
        padding:24px;
        width:900px;
        box-sizing: border-box;
        .textare{        
            textarea{
                width:700px;
                height:90px;
                border:1px solid rgb(245, 244, 244);
                padding:12px;
            }
        }
        .but{
            width:100px;
            height:36px;
            text-align: center;
            color:#fff;
            line-height: 36px;
            background: #007fff;
            margin-right:60px;
            margin-top:20px;
        }
        .dis_content{
            margin-left:10px;
            margin-top:20px;
            border-bottom:1px solid rgb(236, 236, 236);
            .user{
                width:40px;
            }
            .dis{
                width:700px;
                margin-left:20px;
                margin-top:10px;
                padding-bottom:20px;
                ;
                p{
                    margin-top:12px;
                    color:#777676;
                    border:0px;
                    padding-bottom:0px; 
                }
                ul{
                    li{
                        float:left;
                        margin-top:14px;
                        margin-right:20px;
                        font-size:14px;
                        color:rgb(179, 178, 178);
                        i{
                            margin-right:10px;
                        }
                    }
                   .dele{
                        float:right;
                    }
                    .dele01{
                        margin-right:40px !important;
                    }
                }
            }
            .both{
                height:1px;
                width:100%;
                clear: both;
            }
            .dis_bg{
                background: #fafafa;
            }
            .dis02{
                margin-left:20px;
                padding-top:20px;
            }
        }
    }
    .reply{
        padding-bottom:30px;
        input{      
            width:580px;
            padding:12px;
            border-radius: 4px;
            border:1px solid #dbdbdb;
            margin-left:78px;
            padding-bottom:10px;
        }
        button{
            padding:11px 24px;
            border-radius: 4px;margin-left:10px;
            background: #007fff;
            color:#fff;
        }
    }
    .h3:before{
        content:"";
        display: inline-block;
        width:4px;
        height:24px;
        background: #007fff;
        position: absolute;
        left:-12px;
        top:8px;
    }
    h3{
        line-height: 40px;
        padding-bottom:10px;
        margin-left:18px;
        position: relative;
    }
    .dis03{
        border-bottom:1px solid #e9e8e8;
        padding-bottom:12px!important;
        margin-bottom:20px;
        ul{
            li{
                margin:5px!important;
            }
            li:nth-child(1){
                margin-left:0px!important;
            }
        }
    }
    .header{
        width:40px;
        height:40px;
        background: #dbdbdb;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        margin-right:20px;
        overflow: hidden;
        i{
            color:#fff;
        }
        img{
            min-width:40px;
            min-height:40px;
            max-width:50px;
            max-height:50px;
        }
    }
    .login{
        width:100%;
        height:100px;
        background: #f5f5f5;
        text-align: center;
        line-height: 100px;
        margin-bottom:30px;
        button{
            padding:6px 20px;
            color:#007fff;
            background: #fff;
            border-radius: 4px;
            border:1px solid #007fff;
            
        }
        span{
            color:#777676;
            font-size:13px;
            margin-left:10px;
        }
    }
    .error_message{
        position: fixed;
        top:10%;
        right:0px;
        width:0px;
        height:40px;
        text-align: center;
        line-height: 40px;
        background: #edf4fd;
        color:#007fff;
        border:1px solid #007fff;
        transition: width 1s;
        overflow: hidden;
    }
    .isactive{
        width:200px;
    }
    .no_reply{
        text-align: center;
        height:160px;
        box-sizing: border-box;
        padding-top:60px;
        i{
           font-size:36px;
           color: #dbd9d9;
        }
        p{
            color:#aaaaaa;
        }
    }
    .sm{
        margin-left:-4px;
    }
    .huifu{
        vertical-align: top;
    }
}
